<template>
    <el-main>
        <div class="header">
            <Header v-model="activeIndex"></Header>
        </div>

        <div class="conn">
            <div v-if="exercise?.length">
                
                    <DanceList @click="handler" :data="data" v-for="data in exercise" :key="data.id"></DanceList>
                
            </div>
            <el-empty
                v-else
                description="无更多数据"
                :image-size="225"
                image="	https://rs.dance365.com/img/no_content@3x.0fd78ad2.png"
            >
            </el-empty>
        </div>
        
    </el-main>
       
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import Header from './components/header.vue'
import DanceList from "./components/danceList.vue";
import trainingCenterApi,{type exerciseList} from "@/api/training";
import '@/assets/iconcss/font_3754340_uzcil4i6yor/iconfont.css'
import {useRouter} from 'vue-router'
const router = useRouter()
const exercise=ref<exerciseList[]>()
const activeIndex =ref('1')


const handler=()=>{
    
    router.push('/training/detail')
}
watch(activeIndex,async (nval,oval)=>{
    
    if (activeIndex.value=='1') {
        getInitData();
    }else{
    try {
        let result = await trainingCenterApi.getmycreate(activeIndex.value)

        exercise.value=result.data.content
    } catch (error) {
        console.log(error);
    }
}
    
    
})
const getInitData = async () => {

    try {
        let result = await trainingCenterApi.getTrainingCenter()
        
        exercise.value=result.data.content
    } catch (error) {
        console.log(error);
    }
};

onMounted(() => {
    getInitData();
});
</script>

<style lang="less" scoped>

.el-main {
    padding: 0;
    overflow-x: hidden;
    .header{
        background-color: #fff;

    }
}


// 选择区域


.conn {
    width: 960px;
    min-height: 720px;
    padding: 10px 30px;
    margin-bottom: 20px;
    background-color: #fff;
    
    
}
.el-empty {
    height: 644px;
    padding: 0;
}
.leftT {
    font-size: 14px;
    width: 170px;
}
.leftB {
    width: 170px;
}
// .rightT {
// }

.mt-5 {
    margin-top: 5px;
}
.mb-5 {
    margin-bottom: 5px;
}
.ml-5 {
    margin-left: 5px;
}
.mr-5 {
    margin-right: 5px;
}

.mt-10 {
    margin-top: 10px;
}
.mb-10 {
    margin-bottom: 10px;
}
.ml-10 {
    margin-left: 10px;
}
.mr-10 {
    margin-right: 10px;
}

.mt-20 {
    margin-top: 20px;
}
.mb-20 {
    margin-bottom: 20px;
}
.ml-20 {
    margin-left: 20px;
}
.mr-20 {
    margin-right: 20px;
}
</style>
